<template>
  <van-row>
    <van-nav-bar
      title="计件工资详情"
      left-text="返回"
      left-arrow
      @click-left="$emit('close')"
      @click-right="handleAction"
    >
      <template #right>
        <van-icon name="plus" size="20" />
      </template>
    </van-nav-bar>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<!--      <van-search v-model="page.query.keyword" show-action placeholder="请输入关键字" @search="handleSearch">
        <template #action>
          <div @click="handleSearch">搜索</div>
        </template>
      </van-search>-->
      <van-list
        v-model="tableLoading"
        :finished="finished"
        finished-text="没有更多了"
        @load="doPage"
      >
        <van-cell v-for="(item,index) in tableData" :key="index">
          <van-swipe-cell>
            <template #default>
              <div class="title">
                <div v-html="highlightText(item.date + ' ' + item.employeeName, page.query.keyword)" />
              </div>
              <div class="title right primary">
                <div v-html="highlightText(item.pieceRateWage + '元', page.query.keyword)" />
              </div>
              <div class="desc">
                <div v-html="highlightText(item.shiftName + ' ' + item.processName, page.query.keyword)" />
              </div>
              <div class="desc">
                <div>补贴：{{ item.subsidy }}</div>
              </div>
            </template>
            <template />
            <template #right>
              <van-button square type="warning" class="swipe_button" text="修改" @click="toUpdate(item)" />
              <van-button square type="danger" class="swipe_button" text="删除" @click="handleDelete(item)" />
            </template>
          </van-swipe-cell>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="showUpdate" position="right" :style="{ width: '100%', height: '100%' }">
      <piece-rate-wage-update-module ref="submitModule" @close="handleClose" />
    </van-popup>
    <van-popup v-model="showCalculate" position="right" :style="{ width: '100%', height: '100%' }">
      <piece-rate-wage-calculate-module ref="calculateModule" @close="handleClose" />
    </van-popup>
  </van-row>
</template>
<script>
import { deletePieceRateWageDetail, selectDetailPage } from '@/api/pieceRateWage'
import { Dialog } from 'vant'
import { highlightText } from '@/utils/util'
import PieceRateWageUpdateModule from '@/views/pieceRateWage/pieceRateWageUpdate.vue'
import PieceRateWageCalculateModule from '@/views/pieceRateWage/pieceRateWageCalculate.vue'
import moment from 'moment/moment'

export default {
  name: 'PieceRateWageDetail',
  components: { PieceRateWageCalculateModule, PieceRateWageUpdateModule },
  data() {
    return {
      showCalculate: false,
      showUpdate: false,
      tableLoading: false,
      finished: false,
      refreshing: false,
      tableData: [],
      page: {
        page: 1,
        size: 10,
        total: 0,
        query: {
          shiftId: '-1',
          processId: '-1',
          keyword: '',
          dateRange: [],
          groupId: ''
        }
      },
      shiftList: [],
      processList: [],
      showDateRangePicker: false,
      dateRange: '',
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  methods: {
    highlightText,
    doPage() {
      this.tableLoading = true
      selectDetailPage(this.page).then(resp => {
        if (resp.success) {
          if (this.refreshing) {
            this.tableData = []
            this.refreshing = false
          }
          this.tableData = [...this.tableData, ...resp.data.records]
          this.page.total = resp.data.total
          this.finished = this.tableData.length >= resp.data.total
        }
      }).finally(() => {
        this.tableLoading = false
      })
    },
    handleSearch(groupId) {
      this.page.query.groupId = groupId
      this.tableData = []
      this.page.page = 1
      this.finished = false
      this.doPage()
    },
    onRefresh() {
      this.page.page = 1
      this.doPage()
    },
    toUpdate(row) {
      this.showUpdate = true
      this.$nextTick(() => {
        this.$refs.submitModule.init(row.id)
      })
    },
    handleAction() {
      this.showCalculate = true
      this.$nextTick(() => {
        this.$refs.calculateModule.init()
      })
    },
    handleDelete(row) {
      Dialog.confirm({
        title: '删除确认',
        message: '是否删除此信息'
      }).then(() => {
        deletePieceRateWageDetail({ ids: [row.id] }).then(resp => {
          if (resp.success) {
            this.$toast.success('删除成功')
          }
        }).finally(() => {
          this.handleSearch()
        })
      }).catch(() => {})
    },
    handleClose() {
      this.showUpdate = false
      this.showCalculate = false
    }
  }
}
</script>

<style scoped>

</style>
